<template>
	<view class="project_jd">
		<u-navbar
			ref="navbar"	
			back-icon-name="arrow-leftward" 
			title="新建项目"
			:background="{
				background: '#5C77FF',
			}"
			title-color="#ffffff"
			back-icon-color="#ffffff">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item label="项目名称" :required="true" prop="title" :border-bottom="false">
					<u-input v-model="form.title" :border="true" />
				</u-form-item>
				<u-form-item label="项目描述" :required="true" :border-bottom="false" >
					<u-input v-model="form.content" :border="true" type="textarea"/>
				</u-form-item>
				<u-form-item label="责任单位" :border-bottom="false" :required="true" prop="company" class='responsible'>
					<u-input v-model="form.company" :border="true" @focus="showContainer" @blur="hiddenContainer" @input="changeSearch(1)" />
					<view class="searchContainer" v-if="isShowContainer && searchList.length">
						<view>
							<view v-for="(item,index) in searchList" :key='index' @click="getResponsible(item)">{{item}}</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="单位分管领导" :border-bottom="false" :required="true" prop="company" class='responsible'>
					<u-input v-model="form.companyLeader" :border="true" @focus="showCompanyLeader" @blur="hiddenCompanyLeader"
						@input="changeSearch(2)"/>
					<view class="searchContainer"  v-if="isShowCompanyLeader && companyLeaderList.length">
						<view>
							<view v-for="(item,index) in companyLeaderList" :key='index' @click="getCompanyLeader(item)">{{item}}</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="资金构成" :border-bottom="false" :required="true">
					<view class="unitContainer" v-for="(item,index) in capitalList" :key="index">
						<view class="content_bottom_row">
							<u-input v-model="item.money" type="text" :border="true" :disabled='isHide' placeholder="请填写资金" />
							<view style="margin-left: 5px;">
								万元
							</view>
						</view>
						<u-input v-model="item.remark" :border="true" placeholder="请填写备注" />
					</view>
					<view class="buttonContainer">
						<u-icon name="plus-circle-fill" size="60" color="#2979FF" @click="addInput"></u-icon>
						<u-icon name="minus-circle-fill" size="60" color="red" @click="deleteInput"></u-icon>
					</view>

				</u-form-item>
				<u-form-item label="项目类型" :border-bottom="false" :required="true" prop="projectType">
					<u-input v-model="form.projectType" type="select" :border="true" @click="projectTypeShow = true" />
					<u-action-sheet :list="actionSheetList3" v-model="projectTypeShow" @click="actionSheetCallback3"></u-action-sheet>
				</u-form-item>
				<u-form-item label="建设地点" :border-bottom="false" :required="true">
					<u-input v-model="form.constructSite" :border="true" placeholder="请填写建设地点" />
				</u-form-item>
				<u-form-item label="所属行业" :border-bottom="false" :required="true" prop="industry">
					<u-input v-model="form.industry" :border="true"/>
					<!-- <u-action-sheet :list="actionSheetList1" v-model="industryShow" @click="actionSheetCallback1"></u-action-sheet> -->
				</u-form-item>
				<u-form-item label="项目级别" :border-bottom="false" :required="true" prop="level">
					<u-input v-model="form.level" type="select" :border="true" @click="levelShow = true" />
					<u-action-sheet :list="actionSheetList2" v-model="levelShow" @click="actionSheetCallback2"></u-action-sheet>
				</u-form-item>
				<u-form-item label="项目总负责人" :border-bottom="false" :required="true">
					<view style="overflow: hidden;" class="leaderContainer">
						<u-tag  v-for="(item,index) in principal" 
								:key='index' 
								closeable 
								:text='item' 
								type='info' 
								color='#000'
								@close="deletePrincipal(index)"
						></u-tag>
						<u-button type="primary" :custom-style="{
							width:'60px',
							borderRadius: '5px',
							padding:'5px 10px',
							margin: '0',
							border:'0px solid #ffffff',
							float:'right'
						}"
						 @click="modalShow = true">
							<u-icon name="plus"></u-icon>
							<view>添加</view>
						</u-button>
					</view>
				</u-form-item>
				<u-form-item label="预计开工时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectStartTime">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="预计前期工作完成时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectStateTime0">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="预计实施阶段完成时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectStateTime1">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="预计竣工阶段完成时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectStateTime2">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="预计结算阶段完成时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectStateTime3">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="预计移交阶段完成时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectStateTime4">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="预计效益评估完成时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectStateTime5">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="预计结束时间" :border-bottom="false" :required="true">
					<SelectDateBt
						v-model="form.expectEndTime">
					</SelectDateBt>
				</u-form-item>
				<u-form-item label="总投资" :border-bottom="false" :required="true">
					<u-input v-model="form.investTotal" :border="true" placeholder=" " :disabled="true" />
				</u-form-item>
				<u-form-item label="预计年度投资" :border-bottom="false" :required="true">
					<view class="content_bottom_row" v-for="(item,index) in invesList" :key="index">
						<view  :style="{marginBottom:'10px'}">
							{{Object.keys(item)[0]}}
							<u-input v-model="item[Object.keys(item)]" :border="true" placeholder="请填写资金" />
						</view>
						<view style="margin-left: 5px;">
							万元
						</view>
					</view>
				</u-form-item>
				<u-form-item label=" " :border-bottom="false">
					<u-button @click="submit">确定</u-button>
				</u-form-item>
			</u-form>
			<u-modal v-model="modalShow" title="请输入项目负责人" :show-cancel-button='true' @confirm='confirmLeader'>
				<u-input :boder='true' v-model='leader' :custom-style="{
					margin:'0 31px'
				}"></u-input>
			</u-modal>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	//新建项目页面
	import SelectDateBt from '@/components/public/SelectDateBt.vue';
	export default {
		components: {
			SelectDateBt,
		},
		data() {
			return {
				index: '',
				isShowContainer: false,
				isShowCompanyLeader: false,
				principal: [],
				leader: '',
				modalShow: false,
				industryShow: false,
				projectTypeShow:false,
				levelShow: false,
				searchList: [],
				companyLeaderList: [],
				capitalList: [{
					money: '',
					remark: '',
				}, ],
				invesList: [],
				actionSheetList1: [{
						text: '医药'
					},
					{
						text: '计算机'
					},
					{
						text: '教育'
					}
				],
				actionSheetList2: [
					{
						text: '省级'
					},
					{
						text: '市级'
					},
					{
						text: '区级'
					},
					{
						text: '其他'
					},
					{
						text: '债券'
					},
					{
						text: '中省预算'
					},
					{
						text: '三比三看'
					},
				],
				actionSheetList3:[
					{
						text: '加快前期'
					},
					{
						text: '新开工'
					},
					{
						text: '续建'
					},
				],
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				endShow: false,
				endShow1: false,
				endShow2: false,
				endShow3: false,
				endShow4: false,
				endShow5: false,
				endShow6: false,
				startShow: false,
				form: {
					content:'',
					title: '',
					principal: [],
					industry: '',
					level: '',
					expectStartTime: '',
					expectEndTime: '',
					expectStateTime0: "",
					expectStateTime1: "",
					expectStateTime2: "",
					expectStateTime3: "",
					expectStateTime4: "",
					expectStateTime5: "",
					company: '',
					companyLeader: '',
					constructSite: '',
					expectAnnualInvest: '',
					investOrigin: '',
					investTotal: 0,
					projectType:'',
				},
				rules: {
					title: [{
						required: true,
						message: '请输入项目标题',
						trigger: ['change', 'blur']
					}, ],
					industry: [{
						required: true,
						message: '请选择项目所属行业',
						trigger: ['change', 'blur']
					}, ],
					level: [{
						required: true,
						message: '请选择项目级别',
						trigger: ['change', 'blur']
					}, ],
					projectType: [{
						required: true,
						message: '请选择项目类别',
						trigger: ['change', 'blur']
					}, ],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch:{
			'form.expectEndTime'(data) {
				let startYear = new Date(this.form.expectStartTime).getFullYear();
				let endYear = new Date(this.form.expectEndTime).getFullYear();
				if(!startYear || !endYear) return;
				let length = endYear - startYear;
				let year = startYear + "年";
				this.invesList = [];
				this.invesList.push({
					[year] : 0,					
				});
				for (var i = 0; i < length; i++) {
					startYear++
					year = startYear + "年"
					this.invesList.push({
						[year]: 0,						
					});
				}
			},
		},
		methods: {
			actionSheetCallback1(index) {
				this.form.industry = this.actionSheetList1[index].text;
			},
			actionSheetCallback2(index) {
				this.form.level = this.actionSheetList2[index].text;
			},
			actionSheetCallback3(index) {
				this.form.projectType = this.actionSheetList3[index].text;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (this.principal.length == 0) {
							this.$refs.uToast.show({
								title: '请添加负责人',
								type: 'warning',
							});
							return
						} else if (!this.form.expectStartTime) {
							this.$refs.uToast.show({
								title: '请选择开始时间',
								type: 'warning',
							});
							return
						} else if (!this.form.expectEndTime) {
							this.$refs.uToast.show({
								title: '请选择结束时间',
								type: 'warning',
							});
							return
						}
						this.form.principal = this.principal.join('|')
						this.form.expectAnnualInvest = {}
						this.invesList.forEach(item =>{
							this.form.expectAnnualInvest[Object.keys(item)[0]] = +item[Object.keys(item)[0]]
						})
						this.form.investOrigin = this.capitalList
						this.capitalList.forEach(item => {
							item.money = item.money
							this.form.investTotal += (+item.money)
						})
						this.$ajax({
							url: '/wx/project',
							method: 'POST',
							data: this.form,
							success: (res) => {
								if (res.data.state == 200) {
									uni.navigateTo({
										url: '/pages/project_gk/project_gk',
									});
								}
							},
							complete: () => {

							},
						});
					} else {

					}
				});
			},
			confirmLeader() {
				if (this.leader) {
					this.principal.push(this.leader)
					this.leader = ''
				}
			},
			deletePrincipal(index){
				this.principal.splice(index,1)
			},
			showContainer() {
				this.isShowContainer = true
			},

			changeSearch(val) {
				this.searchList = []
				this.companyLeaderList = []
				let url = '';

				if (val == 1 && this.form.company) {
					url = `/wx/project/choose?name=${this.form.company}&type=单位`
				} else if (val == 2 && this.form.companyLeader) {
					url = `/wx/project/choose?name=${this.form.companyLeader}&type=领导`
				}
				if (!url) {
					return
				}
				this.$ajax({
					url: url,
					method: 'GET',
					headers: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					success: (res) => {
						if (res.data.state == 200) {
							if (res.data.data.length > 10) {
								for (var i = 0; i < 9; i++) {
									if (val == 1) {
										this.searchList.push(res.data.data[i].name)
									} else if (val == 2) {
										this.companyLeaderList.push(res.data.data[i].name)
									}
								}
							} else {
								if (val == 1) {
									res.data.data.forEach(item => {
										this.searchList.push(item.name)
									})
								} else if (val == 2) {
									res.data.data.forEach(item => {
										this.companyLeaderList.push(item.name)
									})
								}
								
							}
						}
					},
					complete: () => {

					},
				});
			},

			hiddenContainer() {
				setTimeout(() => {
					this.isShowContainer = false
					this.searchList = []
				}, 100)
			},
			getResponsible(val) {
				this.form.company = val
			},
			showCompanyLeader() {
				this.isShowCompanyLeader = true
			},
			hiddenCompanyLeader() {
				setTimeout(() => {
					this.isShowCompanyLeader = false
					this.companyLeaderList = []
				}, 100)
			},
			getCompanyLeader(val) {
				this.form.companyLeader = val
			},
			addInput() {
				this.capitalList.push({
					money: '',
					remark: '',

				})
			},
			deleteInput() {
				let length = this.capitalList.length - 1
				if (length == 0) {
					this.$refs.uToast.show({
						title: '资金构成至少一组',
						type: 'warning',
					});
					return
				}
				this.capitalList.splice(length, 1)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content_bottom_row {
		@include flex_layout_row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
	}

	.project_jd {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;

		.head {
			width: 100vw;
			// background-image: url("https://blog.mrabit.com/bing/today");
			// background-repeat: no-repeat;
			// background-size: cover;
			// background-position: center 0;
			height: fit-content;
		}

		.content {
			background-color: #fff;
			width: 100vw;
			padding: 0 15px;
		}

		.leaderContainer {
			>u-tag {
				margin-right: 4px;

				/deep/ .u-tag {
					height: 30px;
					font-size: 15px;
				}
			}
		}
	}

	.u-size-default {
		font-size: 30px !important;
		padding: 26px 22px !important;
	}

	.responsible {
		position: relative;
	}

	.searchContainer {
		background-color: #fff;
		z-index: 999;
		top: 78px;
		position: absolute;
		border: 1px solid #DCDFE6;
		border-radius: 0 0 5px 5px;
		border-top: 0 !important;
		width: 92vw;
		>view {
			margin: 7px 10px 0;
			padding: 8px 0 7px;
			background: 0 0;
			border-top: 2px solid #f5f5f6;
		}
	}

	.unitContainer {
		margin-bottom: 10px;
	}

	.capitalContainer {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.buttonContainer {
		text-align: right;
	}
</style>
